<template>
  <view class="ver-layout">
    <view class="card-layout">
      <u-cell-group :border="false">
        <u-cell title="Modify password" :isLink="true" arrow-direction="right"></u-cell>
        <u-cell title="Bind Mobile phone" :isLink="true" arrow-direction="right"></u-cell>
        <u-cell title="Bind email" :isLink="true" arrow-direction="right"></u-cell>
        <u-cell title="Set password protection" :isLink="true" arrow-direction="right"></u-cell>
        <u-cell title="Enable Biometric">
          <u-switch slot="right-icon" v-model="checked"></u-switch>
        </u-cell>
        <u-cell title="Bind Whatsapp" :isLink="true" arrow-direction="right"></u-cell>
        <u-cell title="Bind Facebook" :isLink="true" arrow-direction="right"></u-cell>
        <u-cell title="Bind Google" :isLink="true" :border="false" arrow-direction="right"></u-cell>
      </u-cell-group>
    </view>
  </view>
</template>

<script>
export default {
  name: "setting",
  data() {
    return {
      checked: true
    }
  }
}
</script>

<style scoped>
.card-layout {
  padding: 10px;
  margin: auto;
  margin-top: 20px;
  width: calc(100% - 10 * 2px - 10 * 2px);
  background: white;
  border-radius: 10px;
}
</style>
